//高阶组件  是一种封装，高阶组件本身是一个函数、参数是一个组件，返回值是新组件，
//使用时需要在 组件中引入，组件导出的位置 将 高阶组件作为函数来调用

import { PureComponent } from "react";

//引入样式
import './withRightNav1.scss';


function withRightNav1(WrapComponent) {
    return class extends PureComponent {
        constructor() {
            super();
            this.state = {
                type5: false
            }
        }
        componentDidMount() {
            setTimeout(() => {
                this.setState({ type5: !this.state.type5 })
            }, 500);
        }
        changeFn = () => {
            this.setState({ type5: !this.state.type5 })
        }
        goHead = () => {
            var scrollTop = document.documentElement.scrollTop;
            var timer = setInterval(function () {
                scrollTop -= 10;
                document.documentElement.scrollTop = scrollTop;
                if (scrollTop <= 0) {
                    //停止定时器
                    clearInterval(timer);
                }
            }, 5);
        }
        render() {
            let { type5 } = this.state;
            return <>
                <WrapComponent {...this.props}></WrapComponent>
                <div className="quick_con1">
                    <div className={type5 ? "btn2" : "active"} onClick={this.goHead}></div>
                    <div className={type5 ? "btn3" : "active"}></div>
                    <div className={type5 ? "btn4" : "active"}></div>
                    <div onClick={this.changeFn} className={type5 ? "btn5" : "btn5_1"} ></div>
                </div>
            </>
        }
    }
}
export default withRightNav1;
